@import '../common/style/base.less';

@cell-height: var(--td-cell-height, auto);
@cell-vertical-padding: var(--td-cell-vertical-padding, 32rpx);
@cell-horizontal-padding: var(--td-cell-horizontal-padding, 32rpx);
@cell-bg-color: var(--td-cell-bg-color, @bg-color-container);
@cell-hover-color: var(--td-cell-hover-color, @bg-color-secondarycontainer);
@cell-border-color: var(--td-cell-border-color, @component-stroke);
@cell-border-width: var(--td-cell-border-width, 1px);
@cell-border-left-space: var(--td-cell-border-left-space, @cell-horizontal-padding);
@cell-border-right-space: var(--td-cell-border-right-space, 0);
@cell-description-color: var(--td-cell-description-color, @text-color-secondary);
@cell-description-font: var(--td-cell-description-font, @font-body-medium);
@cell-note-color: var(--td-cell-note-color, @text-color-placeholder);
@cell-note-font-size: var(--td-cell-note-font-size, @font-size-m);
@cell-title-color: var(--td-cell-title-color, @text-color-primary);
@cell-title-font: var(--td-cell-title-font, @font-body-large);
@cell-left-icon-color: var(--td-cell-left-icon-color, @brand-color);
@cell-left-icon-size: var(--td-cell-left-icon-size, 48rpx);
@cell-right-icon-color: var(--td-cell-right-icon-color, @text-color-placeholder);
@cell-right-icon-size: var(--td-cell-right-icon-size, 48rpx);
@cell-required-color: var(--td-cell-required-color, @error-color);
@cell-required-font-size: var(--td-cell-required-font-size, @font-size-m);
@cell-image-width: var(--td-cell-image-width, 96rpx);
@cell-image-height: var(--td-cell-image-height, 96rpx);

.@{prefix}-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: @cell-vertical-padding @cell-horizontal-padding;
  height: @cell-height;
  background-color: @cell-bg-color;

  &--bordered::after {
    .hairline-bottom(@cell-border-color, @cell-border-width);
    transform-origin: bottom;
    left: @cell-border-left-space;
    right: @cell-border-right-space;
  }

  &__description {
    font: @cell-description-font;
    color: @cell-description-color;

    &-text {
      margin-top: calc(@spacer / 2);
    }
  }

  &__note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: @cell-note-color;
    font-size: @cell-note-font-size;
  }

  &__title {
    margin-right: @spacer-2;
  }

  &__title,
  &__note {
    flex: 1 1 auto;

    &:empty {
      display: none;
    }
  }

  &__title-text {
    display: flex;
    font: @cell-title-font;
    color: @cell-title-color;
  }

  &__left,
  &__right {
    align-self: stretch;
  }

  &__left {
    &:not(:empty) {
      margin-right: @spacer-1;
    }

    &-icon {
      color: @cell-left-icon-color;
      font-size: @cell-left-icon-size;
    }

    &-image {
      height: @cell-image-height;
      width: @cell-image-width;
    }
  }

  &__note:not(:empty) + &__right {
    margin-left: calc(@spacer / 2);
  }

  &__right {
    display: flex;

    &-icon {
      color: @cell-right-icon-color;
      font-size: @cell-right-icon-size;
    }

    &--middle {
      align-items: center;
    }

    &--top {
      align-items: flex-start;
    }

    &--bottom {
      align-items: flex-end;
    }
  }

  &--hover {
    background-color: @cell-hover-color;
  }

  &--required {
    font-size: @cell-required-font-size;
    color: @cell-required-color;
  }
}
